<script setup  lang="ts">
import {ref, reactive } from "vue"
</script>

<template>
   <div class="careers-bottom">
      <div class="contact">
        <div>
        <p>联系我们</p>
        <span>QQ：251027727</span>
      </div>
      <div>
        <p>关注我们</p>
        <span>抖音快手同步官方账号名称：
圆阳教育
请认准官方账号商标
（贴商标图）</span>
      </div>
      </div>
      <div class="line"></div>
      <div class="copyright">
        <div>
        <span>© 2023 深圳市鸿蒙科技有限公司 版权所有</span>
        </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
 .careers-bottom{
      flex-direction: column;
      height: 280px;
      width: 100%;
      background-color: #1f2937;
        align-items: start;
      .contact{
        display: flex;
        height: 170PX;
        width: 100%;
        >div{
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 5px;
        padding: 20px;
        justify-content: start;
        align-items: start;
        >p{
          color: #ffffff;
          font-size: 18px;
          font-weight: bold;
        }
        >span{
           color: #ffffff;
        }
      }
      }
      .line{
      height: 5px;
      width: 100%;
      background-color: #2e3847;
      margin-top: 0px;
    }
    .copyright{
        margin-top: 30px;
       width: 100%;
       display: flex;          // 确保flex布局
       justify-content: center; // 水平居中
       align-items: center;  
       span{
        color: #ffffff;
       }
    }
    }
</style>
